<style>
    html {
        background-color: #ffffff;
    }
</style>
<div class="user-api-form layui-form" style="background-color: #ffffff;">

    <form id="user-form" class="layui-form model-form" action="{{.Data.action}}" method="post"
          lay-filter="user-filter">

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required" for="user-admin-username">姓名</label>
            <div class="layui-input-block">
                <input type="text" id="user-admin-username" class="layui-input" name="username" maxlength="100"
                       lay-verify="required" aria-required="true" value="{{.Data.userModel.Username}}"></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required" for="user-admin-real_name">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" id="user-admin-real_name" class="layui-input" name="realName" maxlength="100"
                       lay-verify="required" aria-required="true" value="{{.Data.userModel.RealName}}"></div>
        </div>

        {{if eq $.Data.action "/user/create" }}
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">密码</label>
            <div class="layui-input-block">
                <input type="password" id="user-password" class="layui-input" name="password" maxlength="100"
                       lay-verify="required" aria-required="true"></div>
        </div>
        {{end}}

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required" for="user-admin-phone">手机号</label>
            <div class="layui-input-block">
                <input type="text" id="user-admin-phone" class="layui-input" name="phone" maxlength="32"
                       lay-verify="required" aria-required="true" value="{{.Data.userModel.Phone}}"></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required" for="user-admin-email">邮箱</label>
            <div class="layui-input-block">
                <input type="text" id="user-admin-email" class="layui-input" name="email" maxlength="64"
                       lay-verify="required" value="{{.Data.userModel.Email}}"></div>
        </div>

        {{if eq $.Data.action "/admin/user/create" }}
            {{.BuildIn.DropDownList "status|状态|1|请选择状态|0" (.BuildIn.StatusStr 0 0) -1}}
        {{else}}
            {{.BuildIn.DropDownList "status|状态|1|请选择状态|0" (.BuildIn.StatusStr 0 0) $.Data.userModel.Status}}
        {{end}}

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">角色:</label>
            <div class="layui-input-block">
                <div id="userEditRoleSel">

                </div>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="btnSubmit" lay-submit="">保存</button>
        </div>
    </form>
</div>
<script type="application/javascript">
    layui.use(['layer', 'form', 'admin', 'laydate', 'xmSelect'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var admin = layui.admin;
        var xmSelect = layui.xmSelect;
        var url = $('#user-form').attr('action');
        // admin.iframeAuto();  // 让当前iframe弹层高度适应
        // 表单提交事件
        form.on('submit(btnSubmit)', function (data) {
            layer.load(2);
            data.field['Roles'] = data.field['Roles'].split(',');
            data.field['Roles'].map((item) => {
                return parseInt(item);
            })
            admin.req(url, data.field, function (data) {
                layer.closeAll('loading');
                if (data.code === 0) {
                    layer.msg(data.msg, {icon: 1});
                    admin.putTempData('t-user-admin-form-ok', true);  // 操作成功刷新表格
                    // 关闭当前iframe弹出层
                    admin.closeThisDialog();
                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            }, 'post');

            return false;
        })

        /**
         * 加载角色信息
         */
        admin.req('/admin/role/select', {user_id: "{{.Data.userModel.Id}}"}, function (data) {
            if (data.code === 0) {
                // 渲染多选下拉框
                const insRoleSel = xmSelect.render({
                    el: '#userEditRoleSel',
                    height: '200px',
                    name: 'Roles',
                    layVerify: 'required',
                    layVerType: 'tips',
                    data: data.data.items || []
                });
            } else {
                layer.msg(data.msg, {icon: 2});
            }
        }, 'get');
    });
</script>